<template>
	<view class="bottoms">
		<view class="Bot">
			<view class="flexss">
				<view class="HPage" @click="gopage('/pages/index/index')">
					<image v-if="router != 'pages/index/index'" src="/static/tab/1.png" class="IMGPage">
					</image>
					<image v-if="router == 'pages/index/index'" src="/static/tab/1s.png" class="IMGPage">
					</image>
					<view class="TextHP" :style="router == 'pages/index/index' ? 'color:black' : ''">首页</view>
				</view>
				<view class="HPage" @click="gopage('/pages/FreeMar/FreeMar')">
					<image v-if="router != 'pages/FreeMar/FreeMar'" src="/static/tab/2.png" class="IMGPage"></image>
					<image v-if="router == 'pages/FreeMar/FreeMar'" src="/static/tab/2s.png" class="IMGPage"></image>
					<view class="TextHP" :style="router == 'pages/FreeMar/FreeMar' ? 'color:black' : ''">
						自由集市
					</view>
				</view>
			</view>
			<view class="HPage2" @click="gopage('/pages/SecFree/SecFree')">
				<image src="/static/tab/3.png" class="IMGPage2"></image>
				<view class="circle"></view>
			</view>
			<view class="flexss">
				<view class="HPage" @click="gopage('/pages/officialSale/officialSale')">
					<image v-if="router != 'pages/officialSale/officialSale'" src="/static/tab/4.png" class="IMGPage">
					</image>
					<image v-if="router == 'pages/officialSale/officialSale'" src="/static/tab/4s.png" class="IMGPage">
					</image>
					<view class="TextHP">官方特卖</view>
				</view>
				<view class="HPage" @click="gopage('/pages/mine/mine')">
					<image v-if="router != 'pages/mine/mine'" src="/static/tab/5.png" class="IMGPage"></image>
					<image v-if="router == 'pages/mine/mine'" src="/static/tab/5s.png" class="IMGPage"></image>
					<view class="TextHP" @click="FMar">我的</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "bottoms",
	data() {
		return {
			isClicked: "",
			router: ""
		};
	},
	// 监听路由变化
	'$route': {
		handler(newVal) {
			console.log(newVal)
		},
		immediate: true
	},
	created() {
		const pages = getCurrentPages(); // 获取页面栈
		const currentPage = pages[pages.length - 1]; // 获取当前页面

		// 获取当前页面的路由信息，格式为: `pages/xxx/xxx`
		const route = currentPage.route;
		this.router = route
		console.log(route)
	},
	methods: {
		gopage(url) {
			console.log(url)
			// uni.navigateTo({
			// 	url: url
			// })
			uni.switchTab({
				url: url,
				success: () => {
					console.log('跳转成功');
				},
				fail: (err) => {
					console.log('跳转失败', err);
				}
			});
		},
	}
}
</script>

<style scoped>
.flexss {
	width: 40%;
	justify-content: center;
	justify-items: center;
	display: flex;
}

.TextHP {
	text-align: center;
}

.flexss>.HPage {
	flex: 1;
}

.flexss:nth-child(1) {
	float: left;
}

.flexss:nth-child(3) {
	float: right;
}

.TextHP {
	font-size: 20upx;
	color: #b6b6b6;
	text-align: center;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.TextHP2 {
	font-size: 20upx;
	color: #b6b6b6;
	position: relative;
	transform: translateX(-10upx);

}

.bottoms {
	position: fixed;
	bottom: 40rpx;
	width: 670upx;
	left: 50%;
	transform: translateX(-50%);
}

.IMGPage2 {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 99;
}

.IMGPage {
	width: 40upx;
	height: 40upx;
	display: block;
	margin: 0 auto;
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.HPage2 {
	width: 150upx;
	height: 150upx;
	padding: 30rpx;
	position: relative;
	position: absolute;
	box-sizing: border-box;
	left: 50%;
	transform: translateX(-50%);
	bottom: 5rpx
}

.circle {
	content: "";
	width: 120upx;
	height: 120upx;
	background: white;
	left: 50rpx;
	/* background: rgba(0, 0, 0, 0); */
	border-radius: 50%;
	position: absolute;
	left: 50%;
	bottom: 15rpx;
	z-index: 9;
	transform: translateX(-50%);

}

.HPage {
	position: relative;
	display: inline-block;

	box-sizing: border-box;
	position: relative;
}



.Bot {
	width: 670upx;
	height: 100upx;
	border-radius: 100upx;
	background: #fff;
	box-shadow: 0upx 8upx 8upx 0upx rgba(27, 38, 26, 0.13);
}
</style>